<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list">
				<!-- <image class="img" @click="clickImg(index)" :src="item.url + suffix" mode=""></image> -->
				
				<view class="img" @click="clickImg(index)">
					<u-image :lazy-load="true" border-radius="20rpx" width="100%" height="100%" :src="item.url"
						:fade="true" duration="450">
						<u-loading style="border-radius: 20rpx;" slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">
							<!-- 加载失败 -->
								<image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/empty.png" mode=""></image>
						</view>
					</u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {},
			// 任务ID
			taskId: 0,
			// 模版ID
			movId: 0,
			// 创作者ID
			creatorId: 0,
			// 账号ID
			accountId: 0,
			// 图集ID
			atlasId: 0,
			suffix:'',
		},
		data() {
			return {}
		},
		methods: {
			clickImg(index) {
				// 获取图片数组
				const imgList = encodeURIComponent(JSON.stringify(this.list))

				this.taskId = this.taskId ?? 0;
				this.movId = this.movId ?? 0;
				this.creatorId = this.creatorId ?? 0;
				this.accountId = this.accountId ?? 0;
				this.atlasId = this.atlasId ?? 0;

				uni.navigateTo({
					url: "/subpackMain/gallery/mobilemoredetail?imgList=" + imgList +
						"&selectIndex=" + index +
						"&atlasId=" + this.atlasId +
						"&taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId
				})
			},
		},


	}
</script>

<style lang="scss" scoped>
	/deep/ .u-image__error{
		background: none !important;
	}
	.list {
		display: flex;
		flex-wrap: wrap;

		.item {
			margin-bottom: 15rpx;
			width: 219rpx;
			height: 433rpx;

			&:nth-child(3n-1) {
				margin: 0 15rpx;
			}

			.img {
				width: 219rpx;
				height: 433rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>